<template>
	<view class="profile">
		<u-navbar title="Profile" :autoBack="true" leftIconColor="#333"
			:titleStyle="{fontWeight:'bold',fontSize:'32rpx',color:'#333' }" />
		<view class="profile-max">
			<view class="profile-left">
				Head Portrait
			</view>
			<view class="profile-right" @click="handleUpload">
				<image class="profile-img" :src="avatar"></image>
				<u-icon name="arrow-right" color="#999" size="15"></u-icon>
			</view>
		</view>
		<!-- <view class="profile-max">
			<view class="profile-left">
				Nickname
			</view>
			<view class="profile-right">
				<view class="profile-input">
					<u--input inputAlign="right" placeholder="Nickname" border="none" v-model="name"></u--input>
				</view>
				<u-icon name="arrow-right" color="#999" size="15"></u-icon>
			</view>
		</view> -->
		<view class="profile-max">
			<view class="profile-left">
				First name
			</view>
			<view class="profile-right">
				<view class="profile-input">
					<u--input inputAlign="right" placeholder="First name" border="none" v-model="first_name"></u--input>
				</view>
				<u-icon name="arrow-right" color="#999" size="15"></u-icon>
			</view>
		</view>
		<view class="profile-max">
			<view class="profile-left">
				Last name
			</view>
			<view class="profile-right">
				<view class="profile-input">
					<u--input inputAlign="right" placeholder="Last name" border="none" v-model="last_name"></u--input>
				</view>
				<u-icon name="arrow-right" color="#999" size="15"></u-icon>
			</view>
		</view>
		<view class="profile-max">
			<view class="profile-left">
				Mobile
			</view>
			<view class="profile-right">
				<view class="profile-input">
					<u--input inputAlign="right" placeholder="Set  your mobile" border="none" v-model="tel">
					</u--input>
				</view>
				<u-icon name="arrow-right" color="#999" size="15"></u-icon>
			</view>
		</view>
		<view class="profile-max" @click="$multiRedirect('/pages/user/reset-email')">
			<view class="profile-left">
				Email
			</view>
			<view class="profile-right">
				<view class="profile-input">
					{{email}}
				</view>
				<u-icon name="arrow-right" color="#999" size="15"></u-icon>
			</view>
		</view>
		<view class="profile-max">
			<view class="profile-left">
				Gender
			</view>
			<view class="profile-right">
				<button class="profile-gender cu-btn" :class="gender==1?'acte':''" @click="gender = 1">
					<image class="profile-image" src="/static/images/n.png"></image>
					<view class="profile-text">Man</view>
				</button>
				<button class="profile-gender cu-btn" :class="gender==2?'acte':''" @click="gender = 2">
					<image class="profile-image" src="/static/images/l.png"></image>
					<view class="profile-text">Woman</view>
				</button>
			</view>
		</view>
		<view class="profile-max"  @click="birthdayShow=true">
			<view class="profile-left">
				Birthday
			</view>
			<view class="profile-right">
				<view class="profile-input">
					{{birthday}}
				</view>
				<u-icon name="arrow-right" color="#999" size="15"></u-icon>
			</view>
		</view>
		<view class="setup-behavior">
			<button :loading="submitLoading" class="setup-Chang cu-btn" @click="handleSubmit">Submit</button>
		</view>
		<modal ref="modal" />
		
		<!-- 上传 -->
		<yq-avatar @upload="myUpload" ref="avatar" />
		<!-- 裁剪 -->
		<choose-image ref="chooseImage" imageType="avatar" v-show="false"/>
		<!-- 生日/常驻地 -->
		<u-datetime-picker 
			:show="birthdayShow" 
			confirmText="Confirm"
			cancelText="Cancel"
			ref="datetimePicker"
			:minDate="Number(new Date('1950-01-01'))"
			:maxDate="Number(new Date())"
			mode="date" 
			@confirm="birthdayConfirm" 
			:closeOnClickOverlay="true"
			@close= "birthdayShow=false"
			@cancel= "birthdayShow=false"
		></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				birthdayShow:false,
				submitLoading:false,
				value: '',
				first_name:'',
				last_name:'',
				gender:'',
				birthday:'',
				email:'',
				tel:'',
				name:'',
				avatar:'',
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData(){
				this.$network('/api/user/data',{type:'info'}).then((res)=>{
					const data = res.data||{}
					this.gender = data.gender||0
					this.birthday = data.birthday||''
					this.email = data.email||''
					this.tel = data.tel||''
					this.name = data.name||''
					this.avatar = data.avatar||''
					this.first_name = data.first_name||''
					this.last_name = data.last_name||''
				})
			},
			handleSubmit() {
				this.submitLoading = true;
				let name = this.name||''
				if(this.first_name && this.last_name){
					name = this.first_name+' '+this.last_name
				}
				uni.$network('/api/user/modInfo', {
					gender:this.gender,
					birthday:this.birthday,
					tel:this.tel,
					name:name,
					first_name:this.first_name,
					last_name:this.last_name,
					avatar:this.avatar,
				},()=>{
					this.submitLoading = false;
				}).then((res)=>{
					this.$refs.modal.open()
					
					this.$u.vuex('vuex_user_name',name)
					this.$u.vuex('vuex_user_avatar',this.avatar)
				})
			},
			birthdayConfirm(obj){
				console.log(obj)
				const birthday = uni.$u.timeFormat(obj.value, 'yyyy-mm-dd');
				this.birthday = birthday
				this.birthdayShow = false
			},
			handleUpload(index) {
				this.$refs.avatar.fChooseImg(index, {
					selWidth: '600upx',
					selHeight: '600upx',
				});
			},
			myUpload(rsp) {
				this.$refs['chooseImage'].uploadFile(rsp.path).then((res)=>{
					this.avatar = res.key
					
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFF;
	}

	.profile {
		.setup-behavior{
			padding: 100rpx 30rpx 30rpx 30rpx;
			.setup-Chang{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 90rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #FFFFFF;
				margin-bottom: 46rpx;
				border-radius: 24px;
				background: #128B89;
			}
		}
		.profile-max {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 25rpx;
			height: 120rpx;
			border-bottom: 1px solid #ECECEC;

			.profile-left {
				font-size: 32Rpx;
				font-weight: 400;
				color: #333333;
			}

			.profile-right {
				display: flex;
				align-items: center;

				.profile-gender {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 150rpx;
					height: 54rpx;
					background: rgba(153, 153, 153, 0.3);
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
					margin-left: 16rpx;
					border-radius: 24px;
					padding: 0;
					&.acte{
						background: #128B89;
					}
					.profile-image {
						width: 22rpx;
						height: 24rpx;
						margin-right: 8rpx;
					}
				}

				.profile-input {
					margin-right: 15rpx;
				}

				.profile-img {
					border-radius: 50%;
					width: 92rpx;
					height: 92rpx;
					margin-right: 15rpx;

				}
			}
		}
	}
</style>
